<template>
  <div class="thirdsbRight">
    <s-title text="事项承诺实现分布" :btnshow="false" />
    <div id="thirdsbRightChart"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import axios from "axios";
export default {
  name: "thirdsbRight",
  components: {
    sTitle
  },
  data() {
    return {
      comps: [],
      ls: [
        {
          px: 4,
          lx: "4",
          mc: "5-10天",
          sl: 33,
          zb: 0.14,
          zbzf: "0.14%",
          tjsj: "2021-09-25T22:30:47.000+00:00"
        },
        {
          px: 5,
          lx: "5",
          mc: "10天以上",
          sl: 18,
          zb: 0.08,
          zbzf: "0.08%",
          tjsj: "2021-09-25T22:30:47.000+00:00"
        },
        {
          px: 3,
          lx: "3",
          mc: "3-5天",
          sl: 25,
          zb: 0.11,
          zbzf: "0.11%",
          tjsj: "2021-09-25T22:30:47.000+00:00"
        },
        {
          px: 1,
          lx: "1",
          mc: "1天以内",
          sl: 23190,
          zb: 99,
          zbzf: "99.00%",
          tjsj: "2021-09-25T22:30:47.000+00:00"
        },
        {
          px: 2,
          lx: "2",
          mc: "1-3天",
          sl: 159,
          zb: 0.68,
          zbzf: "0.68%",
          tjsj: "2021-09-25T22:30:47.000+00:00"
        }
      ]
    };
  },
  mounted() {
    axios.get(this.$serverIp + "getTimeLine").then(res => {
      debugger
      //res = this.ls;
      var echartData = { text: [], max: [] };
      for (var i = 0; i < res.data.length; i++) {
        echartData.text.push({ text: res.data[i].mc, max: res.data[i].zb });
        echartData.max.push(res.data[i].zb);
      }
      // var echartData = { xData: [], yData: [] };
      // echartData.yData[0] = [];
      // echartData.yData[1] = [];
      // for (let i = 0; i < res.data.length; i++) {
      //   echartData.xData.push(res.data[i].ny);
      //   echartData.yData[0].push(res.data[i].yps);
      //   echartData.yData[1].push(res.data[i].rps);
      // }
      this.setEchartHandle(echartData);
    });
    //this.setEchartHandle();
  },
  methods: {
    setEchartHandle(echartData) {
      var legendData = ["数量"]; //图例

      var indicator = echartData.text;
      var dataArr = [
        {
          value: echartData.max,
          name: legendData[0],
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#55d7f2"
              }
              // shadowColor: '#4A99FF',
              // shadowBlur: 10,
            }
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: "linear",
                x: 1, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#4A99FF"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0)"
                  }
                ],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        }
      ];
      var colorArr = ["#55d7f2", "#4BFFFC"]; //颜色
      let _echarts = this.$echarts.init(
        document.getElementById("thirdsbRightChart"),
        null,
        { devicePixelRatio: 2 }
      );
      let option = {
        backgroundColor: "",
        color: colorArr,
        legend: {
          orient: "vertical",
          // icon: 'circle', //图例形状
          data: legendData,
          top: 20,
          left: 20,
          itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
          itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            color: "#00E4FF"
          }
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              fontSize: 16
            }
          },
          indicator: indicator,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: "#153269"
            }
          },
          splitLine: {
            lineStyle: {
              color: "#2b75d2", // 分隔线颜色
              width: 2 // 分隔线线宽
            }
          }
        },
        series: [
          {
            type: "radar",
            symbolSize: 8,
            symbol: "circle",
            data: dataArr
          }
        ]
      };

      _echarts.setOption(option);
    }
  }
};
</script>
<style scoped>
.thirdsbRight {
  margin-top: 10px;
}
#thirdsbRightChart {
  width: 100%;
  height: 27vh;
  margin-top: 10px;
}
</style>
 